<!DOCTYPE html>
<html>
	<head>
		<title>3D可视化综合管理平台</title>
		<!-- 公共样式 -->
		<link rel="stylesheet" href="common/css/public.css">
		<!--告警提示面板-->
		<link rel="stylesheet" href="common/css/report.css">
		<!-- element-ui -->
		<link rel="stylesheet" href="plugin/element/element.css">
		<!-- iconfont -->
		<link rel="stylesheet" href="common/iconfont/iconfont.css">
		<meta charset="UTF-8">
		<style>

		</style>
		<!-- ht -->
		<script src="plugin/ht/ht.js"></script>
		<script src="plugin/ht/ht-obj.js"></script>
		<script src="plugin/ht/ht-form.js"></script>
		<script src="plugin/ht/texture.js"></script>
		<script src="plugin/ht/ht-overview.js"></script>
		<script src="plugin/ht/ht-animation.js"></script>
		<script src="plugin/ht/ht-flow.js"></script>
		<!-- vue -->
		<script src="plugin/vue/vue.js"></script>
		<!-- jquert -->
		<script src="plugin/jquery/jquery-3.3.1.min.js"></script>
		<!-- element -->
		<script src="plugin/element/element-ui2.11.1.js"></script>
		<!-- echarts -->
		<script src="plugin/echarts/echarts-gl.min.js"></script>
	</head>
	<body onload="init()" onmousemove="getmouse(event)">

		<div id="htforweb" v-cloak>

			<!-- 进入模型提示 -->
			<div class="mleft"><i class="iconfont icon-shouye mr5"></i><span>{{tipname}}</span><span v-show="tshow">1层</span></div>
			<!-- 提示音 -->
			<div class="playmp3">
				<audio :src="'static/audio/'+item.src" v-for="(item,index) in voiceArr" :class="'vioce'+(index+1)">
					您的浏览器不支持 audio 标签。
				</audio>
				<audio class="vioceHigh" src="static/specialAudio/highpoint.mp3"></audio>
				<audio class="vioceInvade" src="static/specialAudio/invade.mp3"></audio>
			</div>
			<!-- 视频轮播,电子巡更监控视频 -->
			<div class="listvideos tdrag" v-show="isvideolist">
				<p class="vlname">{{vlistname}}<i class="iconfont icon-guanbi fr mr5" @click="isvideolist=false"></i></p>
				<div v-for="(item,index) in listvideo" :key="index">
					<!-- <p class="listvp dnone">{{item.name}}</p> -->
					<object type='application/x-vlc-plugin' width="100%" height="40%">
						<param name='mrl' :value='item.url' />
						<param name='volume' value='50' />
						<param name='autoplay' value='true' />
						<param name='loop' value='false' />
						<param name="wmode" value="transparent">
					</object>
				</div>
			</div>

			<!-- 告警定位提示 -->
			<div class="warntips tdrag" v-show="closewarntrue">
				<h3 class="warntitle"><span class="fl ml10">{{warntipsdata2.deviceName}}（{{wname}}）</span><span class="fr mr15"><i
						 class="iconfont icon-guanbi" @click="closewarntrue=!closewarntrue"></i></span></h3>
				<el-tabs type="border-card" v-model="activeName">
					<el-tab-pane name="pane1" v-if="pane1show">
						<span slot="label"><i class="iconfont mr5" :class="paneicon1"></i>{{panename1}}</span>
						<div v-for="item in warntipsdata1">
							<!-- <p>视频流地址：{{item.url}}</p> -->
							<div style="width: 464px; height: 200px;">
								<object type='application/x-vlc-plugin' width="100%" height="100%">
									<param name='mrl' :value='item.url' />
									<param name='volume' value='50' />
									<param name='autoplay' value='true' />
									<param name='loop' value='false' />
									<param name="wmode" value="transparent">
								</object>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="pane2">
						<span slot="label"><i class="iconfont mr5" :class="paneicon2"></i>{{panename2}}</span>
						<div>
							<p v-show="warntipsdata2.deviceId!=''">设备ID：{{warntipsdata2.deviceId}}</p>
							<p v-show="warntipsdata2.hostIp!=''">IP：{{warntipsdata2.hostIp}}</p>
							<p>房间：{{warntipsdata2.address}}</p>
							<p v-show="warntipsdata2.rtsp_url!=''">url：{{warntipsdata2.rtsp_url}}</p>
							<p>名称：{{warntipsdata2.deviceName}}</p>
						</div>
					</el-tab-pane>
					<el-tab-pane name="pane3" v-if="pane3show">
						<span slot="label"><i class="iconfont mr5" :class="paneicon3"></i>{{panename3}}</span>
						<div v-for="item in warntipsdata3">
							<p v-if="warntipsdata3==''">
								暂无告警信息
							</p>
							<div v-else>
								<p>告警详情：{{item.alarmMessage}}</p>
								<p>告警时间：{{item.alarmTime}}</p>
							</div>
						</div>
						<el-button type="primary" class="fr" @click="warningdetermination(warntipsdata3[0].alarmId)" v-if="warntipsdata3!=''">处理告警</el-button>
					</el-tab-pane>

				</el-tabs>
				<el-tabs v-if="warntipsdata3!=''">
					<el-tab-pane>
						<span slot="label" class="ml10">{{panename4}}</span>
						<div style="height: 200px;" v-if="linkdata4!=''">
							<object type='application/x-vlc-plugin' width="100%" height="100%">
								<param name='mrl' :value='linkdata4' />
								<param name='volume' value='50' />
								<param name='autoplay' value='true' />
								<param name='loop' value='false' />
								<param name="wmode" value="transparent">
							</object>
						</div>
						<p v-else>暂无关联视频</p>
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 统计图start -->
			<!-- <transition name="el-zoom-in-top"> -->
			<div id="canvasmain" v-if="canvashow">
			</div>
			<!-- <transition> -->
			<!-- 统计图end -->
			<!-- 头部start -->
			<div class="header">
				<!-- 平台 -->
				<img src="static/icon/logo.png">
				<h2>3D可视化综合管理平台</h2>
				<!-- 概览 -->
				<div class="gailan">
					<i class="iconfont icon-shouye"></i>
					<span class="cp" v-text="level1" @click="FirstAngleView(32)"></span>
					<i v-show="level2==''?level2hide:!level2hide" class="iconfont icon-titleyou"></i>
					<span v-text="level2"></span>
					<i v-show="level3==''?level3hide:!level3hide" class="iconfont icon-titleyou"></i>
					<span v-text="level3"></span>
				</div>
				<div class="saveView">
					<el-checkbox v-model="isSaveView">保存外景视角</el-checkbox>
				</div>
				<!-- login -->
				<div class="logininfo">

					<!-- 全屏显示 -->
					<div onclick="fullScreen()">
						<i class="iconfont icon-quanping"></i>
						<a class="item" title="全屏显示，按ESC键可退出全屏显示">全屏显示</a>
					</div>
					<!-- 管理后台 -->
					<div onclick="consoleOpen()">
						<i class="iconfont icon-houtaiguanli"></i>
						<a class="item" title="打开3D可视化管理后台登录页面">管理后台</a>
					</div>

					<!-- 操作说明 -->
					<div onclick="helpDocOpen()">
						<i class="iconfont icon-caozuoshouce"></i>
						<a class="item" title="打开在线操作说明">操作说明</a>
					</div>

					<div class="logininfonext" @click.stop="showsignout">
						<i class="iconfont icon-yonghu"></i>
						<span>{{user}}</span>
						<i class="iconfont icon-you"></i>
					</div>
				</div>
				<!-- signout -->
				<div class="signout" v-show="sshow" @click="signout">退出登录</div>
			</div>
			<!-- 左侧 -->
			<div class="leftcontent" v-show="leftcontentshow">
				<ul class="ful">
					<li v-for="(item,index) in leftlist" :key="item.id" @click="leftlistclick(item)">
						<i class="iconfont" :class="item.icon"></i>
						<span v-text="item.name"></span>
					</li>
				</ul>
				<div class="morecontent" v-show="morecontentshow">
					<ul>
						<li v-for="item in morecontent" :key="item.id" @click="moreclick(item)">
							<i class="iconfont" :class="item.icon"></i>
						</li>
					</ul>
				</div>
			</div>
			<!-- 左侧详细 -->
			<div class="leftdetail" v-show="leftdetailshow">
				<!--告警面板-->
				<div class="reportPanel" v-show="dnone">
					<div v-for="(item,index) in getReportArr" :key="index">
						<span class="closed" @click="closedPanel">&times;</span>
						<div class="panel_caption">
							{{item.deviceName}}
						</div>
						<div class="panel_content">
							<p>告警详情：{{item.alarmMessage}}</p>
							<p>告警时间：{{item.alarmTime}} </p>
						</div>
					</div>
				</div>
				<!-- 告警信息 -->
				<div class="warninfo" v-show="warnshow">
					<h3>告警筛选</h3>
					<ul>
						<li v-for="item in warninfodata" :key="item.id">
							<span class="fl">{{item.name}}：{{item.num==''?0:item.num}}</span>
							<div @click="warncheck(item)" class="mr30 fr">
								<el-switch v-model="item.flag" active-color="#4D9EFF" inactive-color="#999">
								</el-switch>
							</div>
						</li>
					</ul>
					<div class="warnnext">
						<span class="fl">告警信息</span>
						<div class="warnright" v-show="warnlistdata!='' && warnlistdata!=undefined">
							<div>
								<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
							</div>
							<span class="ml10 cursorp" @click="batch">批量处理</span>
						</div>
					</div>
					<div class="warnlistcontent scrollbar">
						<div class="warnlist" v-for="(item,index) in warnlistdata" :key="item.alarmId" :title="item.alarmMessage">
							<span class="fl pt6">
								<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
									<el-checkbox :label="item.alarmId" :key="item.alarmId">{{index+1}}.</el-checkbox>
								</el-checkbox-group>
							</span>
							<div class="warnlistleft" @click="warningposition(item)">
								<span class="elips">
									{{item.deviceName}}
								</span>
								<div class="bottom clearfix">
									<time class="time">{{item.alarmTime}}</time>
								</div>
							</div>
							<div class="warnlistright">
								<div @click="warningposition(item)">
									<i class="iconfont icon-dingwei"></i>
									<span>告警定位</span>
								</div>
								<div @click="warningdetermination(item)">
									<i class="iconfont icon-queding"></i>
									<span>告警确认</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 设备搜索 -->
				<div class="device" v-show="deviceshow">
					<h3>设备查询</h3>
					<div class="seldevice">
						<el-input placeholder="请输入设备名称" v-model="seldevice" class="input-with-select" @keyup.enter.native="seldevicedata(seldevice)">
							<el-select v-model="seldeviceprev" slot="prepend" placeholder="请选择">
								<el-option label="设备ID" value="devid"></el-option>
								<el-option label="设备名称" value="devname"></el-option>
								<!-- <el-option label="设备类别" value="devtype"></el-option> -->
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="seldevicedata(seldevice)"></el-button>
						</el-input>
					</div>
					<div class="mt20">搜索结果共：{{deviceselnum}}</div>
					<el-row>
						<el-col :span="9">
							<div class="grid-content bg-purple">设备名称</div>
						</el-col>
						<el-col :span="9">
							<div class="grid-content bg-purple-light">所在位置</div>
						</el-col>
					</el-row>
					<!-- 查询设备列表 -->
					<div class="seldevicelist scrollbar" v-infinite-scroll="seldevicedataload">
						<h1 class="seldevnull" v-if="deviceselnum===0">暂无数据</h1>
						<el-row type="flex" class="row-bg" justify="space-between" v-for="item in seldevicelist" :key="item.id">
							<el-col :span="6">
								<div class="grid-content bg-purple elips" :title="item.deviceName">{{item.deviceName}}</div>
							</el-col>
							<el-col :span="6">
								<div class="grid-content bg-purple-light elips" :title="item.address">{{item.address}}</div>
							</el-col>
							<el-col :span="6" v-if="deviceselnum">
								<div class="grid-content bg-purple devicedetail" @click="warningposition(item)">
									<i class="iconfont icon-dingwei fl"></i>
									<span>设备定位</span>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
				<!-- 电子巡更 -->
				<div class="patrol" v-show="patrolshow">
					<h3>巡更采集</h3>
					<el-row type="flex" justify="center">
						<el-button type="primary" plain @click="startpatrol">开始采集</el-button>
					</el-row>
					<div class="tpatrol">巡更路线：{{patrolcount}} 条
						<el-input placeholder="请输入查询名称,按Enter搜索" v-model="selpatrol" class="input-with-select" @keyup.enter.native="getPatrolLineList(selpatrol)">
						</el-input>
					</div>

					<div class="patrolcontent scrollbar">
						<h1 class="seldevnull" v-if="patrolcount==0">暂无数据</h1>

						<div class="patrollist" v-for="item in patrollistdata" :key="item.lineId">
							<div class="patrollistleft" :title="item.lineName">
								<span class="elips">
									{{item.lineName}}
								</span>
							</div>
							<div class="patrollistright">
								<div @click="getPatrolLineInfo(item.lineId)">
									<i class="iconfont icon-luxian"></i>
									<span>巡更</span>
								</div>
								<div @click="patroldel(item.lineId)">
									<i class="iconfont icon-shanchu"></i>
									<span>删除</span>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- 视频轮播 -->
				<div class="videos" v-show="videoshow">
					<h3><span>视频方案</span><span class="fr cp" @click="addprogramme"><i class="iconfont icon-tianjia mr5"></i>新建</span></h3>
					<div class="scrollbar autoh">
						<!-- <el-collapse accordion v-for="(item,index) in videodata" :key="item.groupId" v-model="activeNames" @change="handleChange"> -->
						<el-collapse accordion v-for="(item,index) in videodata" :key="item.groupId" v-model="activeNames">
							<el-collapse-item :name="item.groupId">
								<template slot="title">
									<span class="vtitle">
										<span class="fl elips w90s">{{index+1}}. {{item.groupName}}</span>
										<span class="fr">({{item.vdata==undefined?0:item.vdata.length}})</span>
									</span>
									<div class="videofunction">
										<div @click.stop="videoedit(item)" v-show="item.videostate">
											<i class="iconfont icon-bianji"></i>
											<span>编辑</span>
										</div>
										<div @click.stop="videosave(item)" v-show="!item.videostate" :class="item.groupId">
											<i class="iconfont icon-baocun"></i>
											<span>保存</span>
										</div>
										<div @click.stop="videolistdel(item.groupId)">
											<i class="iconfont icon-shanchu"></i>
											<span>删除</span>
										</div>
										<div @click.stop="videoplay(item.groupName,item.vdata)">
											<i class="iconfont icon-bofang"></i>
											<span>播放</span>
										</div>
									</div>
								</template>
								<div class="videolist" v-for="itemlist in item.vdata" :key="itemlist.groupId" @click="videoaddress(itemlist)">
									<i class="iconfont icon-icon-video mr15"></i>
									<span>{{itemlist.deviceName}}</span>
									<i class="iconfont icon-shanchu delvideo" @click.stop="delvideo(itemlist)" v-show="!item.videostate"></i>
								</div>
								<div v-if="item.vdata=='' || item.vdata==undefined">
									暂无视频
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>

				</div>

			</div>
			<!-- 巡更开始操作界面 -->
			<div class="patrolstart tdrag" v-show="patrolstartshow">
				<div class="nextclose">
					<!-- <span class="fl">操作状态</span> -->
					<icon class="iconfont icon-guanbi fr" @click="closepatrolui()"></icon>
				</div>
				<div class="block">
					<span>巡更速度 </span>
					<el-slider :max="maxspeed" class="elslider nodrag" v-model="startslider" @change="sliderval($event,maxspeed)"></el-slider>
				</div>
				<div class="mt10">
					<ul>
						<li v-for="item in startpatroldata" :class="item.color" :key="item.id" v-show="item.flag" @click="patrolui(item)">
							<i class="iconfont" :class="item.icon"></i>
							<span v-text="item.name"></span>
						</li>
					</ul>
				</div>
			</div>

			<!-- 开始采集 -->
			<!-- 保存采集,取消采集 -->
			<div class="collectionstart tdrag" v-show="collectionstartshow">
				<ul>
					<li v-for="item in startcollectiondata" :key="item.id" @click="collectionui(item)">
						<i class="iconfont" :class="item.icon"></i>
						<span v-text="item.name"></span>
					</li>
				</ul>
			</div>
			
			<!-- 保存采集弹出界面 -->
			<div class="dialogcontent">
				<el-dialog title="巡更方案" :visible.sync="dialogFormVisible" :destroy-on-close=true>
				  <el-form :model="PatrolFormData" ref="PatrolFormData" label-width="100px" class="demo-ruleForm">
					  <el-form-item
						  label="巡更名称"
						  prop="name"
						  :rules="[
							{ required: true, message: '巡更名称不能为空'}
						  ]"
						>
					  <el-input type="text" placeholder="请输入巡更名称" v-model="PatrolFormData.name" autocomplete="off"></el-input>
					  </el-form-item>
					  <el-form-item
						  label="巡更范围"
						  prop="range"
						  :rules="[
							{ required: true, message: '巡更范围不能为空'},
							{ type: 'number', message: '巡更范围必须为数字'}
						  ]"
						>
						  <el-input type="age" placeholder="请输入数字,单位默认为米" v-model.number="PatrolFormData.range" autocomplete="off"></el-input>
						</el-form-item>
				  </el-form>
					<div slot="footer" class="dialog-footer">
					  <el-button @click="dialogFormVisible = false">取 消</el-button>
					  <el-button type="primary" @click="submitForm('PatrolFormData')">确 定</el-button>
					  <!-- @click="dialogFormVisible = false" -->
					</div>
				  <!-- <el-form-item>
					 <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
					 <el-button @click="resetForm('numberValidateForm')">重置</el-button>
				   </el-form-item> -->
				</el-dialog>
			</div>
			<!-- 右侧 -->
			<!-- 隐藏 -->
			<transition name="el-fade-in-linear">
				<div class="arrow rightshow" v-show="arrow" @click="arrow = false">
					<i class="iconfont icon-titleyou"></i>
				</div>
			</transition>
			<!-- 列表 -->
			<transition name="el-fade-in-linear">
				<div class="rightcontent" v-show="arrow">
					<ul class="rul">
						<li v-for="(item,index) in rightcontentdata" :key="item.id" @click="allhighlight(item,index)" ref="rli">
							<i class="iconfont" :class="item.icon"></i>
							<span v-text="item.name"></span>
						</li>
					</ul>
				</div>
			</transition>
			<!-- 显示 -->
			<transition name="el-fade-in-linear">
				<div class="arrow righthide" v-show="!arrow" @click="arrow = true">
					<i class="iconfont icon-titleyou"></i>
				</div>
			</transition>
		</div>
		<!-- 头部end -->
		<!-- H5页面逻辑 -->
		<script src="common/js/index-logic.js"></script>
		<!-- 监控告警接收 -->
		<script src="common/js/monitoring-reception.js"></script>
		<!-- 模型逻辑 -->
		<script src="common/js/model-logic.js"></script>
		<!-- 公共方法 -->
		<script src="common/js/public.js"></script>
		<!-- 模型文件名称映射 -->
		<script src="common/js/modelMap.js"></script>
		<!-- 模型高亮设置 -->
		<script src="common/js/model-highLight.js"></script>
		<!-- 常规告警 -->
		<script src="common/js/public-alarm.js"></script>
		<!-- 定时任务 -->
		<script src="common/js/task.js"></script>
		<!-- 电子巡更 -->
		<script src="common/js/ele-patrol.js"></script>
		<script type="text/javascript">
			//全屏
			function fullScreen() {
				var el = document.documentElement;
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
				if (typeof rfs != "undefined" && rfs) {
					rfs.call(el);
				};
				return;
			}
			//退出全屏
			function exitScreen() {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
				if (typeof cfs != "undefined" && cfs) {
					cfs.call(el);
				}
			}
			//打开3D可视化平台管理后台
			function consoleOpen() {
				//新窗体中打开页面用
				window.open(manageUrl);
			}
			//打开在线操作说明
			function helpDocOpen() {
				//新窗体中打开页面用
				window.open(operatInstruct);
			}
		</script>

	</body>
</html>
